<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录/注册</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/layui-layer/dist/layer.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 400px;
            margin: 50px auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 24px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .btn {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-bottom: 10px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #545b62;
        }
        .switch-form {
            text-align: center;
            margin-top: 20px;
        }
        .switch-form a {
            color: #007bff;
            text-decoration: none;
            cursor: pointer;
        }
        .switch-form a:hover {
            text-decoration: underline;
        }
        .form {
            display: none;
        }
        .form.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="title">酒店管理系统</h2>
        
        <!-- 登录表单 -->
        <form id="loginForm" class="form active">
            <div class="form-group">
                <label for="loginUsername">用户名：</label>
                <input type="text" id="loginUsername" name="username" required placeholder="请输入用户名" title="用户名">
            </div>
            <div class="form-group">
                <label for="loginPassword">密码：</label>
                <input type="password" id="loginPassword" name="password" required placeholder="请输入密码" title="密码">
            </div>
            <button type="submit" class="btn">登录</button>
            <div class="switch-form">
                <a onclick="switchToRegister()">没有账号？立即注册</a>
            </div>
        </form>
        
        <!-- 注册表单 -->
        <form id="registerForm" class="form">
            <div class="form-group">
                <label for="registerUsername">用户名：</label>
                <input type="text" id="registerUsername" name="username" required placeholder="请输入用户名" title="用户名">
            </div>
            <div class="form-group">
                <label for="registerPassword">密码：</label>
                <input type="password" id="registerPassword" name="password" required placeholder="请输入密码" title="密码">
            </div>
            <div class="form-group">
                <label for="realName">真实姓名：</label>
                <input type="text" id="realName" name="realName" required placeholder="请输入真实姓名" title="真实姓名">
            </div>
            <div class="form-group">
                <label for="phone">手机号：</label>
                <input type="tel" id="phone" name="phone" required placeholder="请输入手机号" title="手机号">
            </div>
            <div class="form-group">
                <label for="idCard">身份证号：</label>
                <input type="text" id="idCard" name="idCard" required placeholder="请输入身份证号" title="身份证号">
            </div>
            <button type="submit" class="btn">注册</button>
            <div class="switch-form">
                <a onclick="switchToLogin()">已有账号？立即登录</a>
            </div>
        </form>
    </div>
    
    <script>
        $(function() {
            // 登录表单提交
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();
                var username = $('#loginUsername').val().trim();
                var password = $('#loginPassword').val().trim();
                
                if (!username) {
                    layer.msg('请输入用户名', {icon: 2});
                    return;
                }
                if (!password) {
                    layer.msg('请输入密码', {icon: 2});
                    return;
                }
                
                var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
                $.ajax({
                    url: 'http://localhost:8080/api/user/checklogin',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password
                    }),
                    success: function(res) {
                        layer.close(loadIndex);
                        // 新版后端返回对象 {status: 'success', userId: ..., username: ...}
                        if((typeof res === 'object' && res.status === 'success') || (typeof res === 'string' && res.trim() === 'success')) {
                            // 兼容老后端返回字符串
                            if(typeof res === 'object') {
                                sessionStorage.setItem('userId', res.userId);
                                sessionStorage.setItem('adminName', res.username);
                                if(res.username === 'admin') {
                                    window.location.href = 'adminindex.html';
                                } else {
                                    window.location.href = 'index.html';
                                }
                            } else {
                                sessionStorage.setItem('adminName', username);
                                if(username === 'admin') {
                                    window.location.href = 'adminindex.html';
                                } else {
                                    window.location.href = 'index.html';
                                }
                            }
                        } else {
                            layer.msg('用户名或密码错误', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('请求失败，请稍后重试', {icon: 2});
                    }
                });
            });
            
            // 注册表单提交
            $('#registerForm').on('submit', function(e) {
                e.preventDefault();
                var username = $('#registerUsername').val().trim();
                var password = $('#registerPassword').val().trim();
                var realName = $('#realName').val().trim();
                var phone = $('#phone').val().trim();
                var idCard = $('#idCard').val().trim();
                
                if (!username) {
                    layer.msg('请输入用户名', {icon: 2});
                    return;
                }
                if (!password) {
                    layer.msg('请输入密码', {icon: 2});
                    return;
                }
                if (!realName) {
                    layer.msg('请输入真实姓名', {icon: 2});
                    return;
                }
                if (!phone) {
                    layer.msg('请输入手机号', {icon: 2});
                    return;
                }
                if (!idCard) {
                    layer.msg('请输入身份证号', {icon: 2});
                    return;
                }
                
                var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
                $.ajax({
                    url: 'http://localhost:8080/api/user/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        username: username,
                        password: password,
                        realName: realName,
                        phone: phone,
                        idCard: idCard
                    }),
                    success: function(res) {
                        layer.close(loadIndex);
                        if(typeof res === 'string' && res.trim() === 'success') {
                            layer.msg('注册成功！', {icon: 1, time: 2000}, function() {
                                switchToLogin();
                                $('#loginUsername').val(username);
                            });
                        } else if(res.trim() === 'fail') {
                            layer.msg('用户名已存在', {icon: 2});
                        } else {
                            layer.msg('注册失败，请稍后重试', {icon: 2});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('请求失败，请稍后重试', {icon: 2});
                    }
                });
            });
        });
        
        // 切换到注册表单
        function switchToRegister() {
            $('#loginForm').removeClass('active');
            $('#registerForm').addClass('active');
        }
        
        // 切换到登录表单
        function switchToLogin() {
            $('#registerForm').removeClass('active');
            $('#loginForm').addClass('active');
        }
    </script>
</body>
</html> 